<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .citySelect {
        margin: auto;
        display: flex;
      }

      ul {
        width: 200px;
        height: 200px;
        background-color: rgb(247, 222, 222);
        text-align: center;
        li {
          height: 30px;
          line-height: 30px;
          border: 1px solid #999;
          margin: 5px auto;
          background-color: #fbf2f2;
          color: rgb(60, 41, 41);
        }

        .active {
          background-color: rgb(152, 105, 105);
          color: rgb(243, 243, 243);
        }
      }

      #btn {
        width: 50px;
        height: 200px;
        background-color: #faf3f3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      button {
        display: block;
        width: 50px;
        height: 30px;
        background-color: #cca9a9;
        border: none;
        &:hover {
          background-color: #f8f1f1;
          border: 1px solid #999;
        }
      }
    </style>
  </head>
  <body>
    <div class="citySelect">
      <ul id="left">
        <li>何玉婷</li>
        <li>李名扬</li>
        <li>李跃</li>
        <li>范冰冰</li>
        <li>蔡徐坤</li>
      </ul>
      <div id="btn">
        <button>>></button>
        <button><<</button>
        <button>></button>
        <button><</button>
      </div>
      <ul id="right"></ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <script>
      // var left = document.getElementById("left");
      // var right = document.getElementById("right");
      // var btnAll = document.querySelectorAll("#btn > button");
      // var leftLIAll = left.querySelectorAll("li");
      // var rightLIAll = right.querySelectorAll("li");

      // // 点击移除类样式
      // function clickLi(li) {
      //   leftLIAll.forEach((item) => {
      //     item.classList.remove("active");
      //   });
      //   rightLIAll.forEach((item) => {
      //     item.classList.remove("active");
      //   });
      //   li.classList.add("active");
      // }

      // // 点谁谁加样式
      // left.addEventListener("click", function (e) {
      //   if (e.target.tagName.toUpperCase() === "LI") {
      //     clickLi(e.target);
      //   }
      // });

      // right.addEventListener("click", function (e) {
      //   if (e.target.tagName.toUpperCase() === "LI") {
      //     clickLi(e.target);
      //   }
      // });

      // btnAll[0].addEventListener("click", function () {
      //   leftLIAll.forEach((item, index) => {
      //     left.removeChild(leftLIAll[index]);
      //     right.appendChild(leftLIAll[index]);
      //   });
      // });
      // btnAll[1].addEventListener("click", function () {
      //   var rightLIAll = right.querySelectorAll("li");
      //   rightLIAll.forEach((item, index) => {
      //     right.removeChild(rightLIAll[index]);
      //     left.appendChild(rightLIAll[index]);
      //   });
      // });
      // btnAll[2].addEventListener("click", function () {
      //   var activeLI = left.querySelector(".active");
      //   if (activeLI) {
      //     right.appendChild(activeLI);
      //   }
      // });

      // btnAll[3].addEventListener("click", function () {
      //   var activeLI = right.querySelector(".active");
      //   if (activeLI) {
      //     left.appendChild(activeLI);
      //   }
      // });

      //   jq的写法
      var $left = $("#left");
      var $right = $("#right");
      var $btnAll = $("#btn > button");

      function clickLi($li) {
        $left.find("li").removeClass("active");
        $right.find("li").removeClass("active");
        $li.addClass("active");
      }

      $left.on("click", "li", function () {
        clickLi($(this));
      });

      $right.on("click", "li", function () {
        clickLi($(this));
      });

      $btnAll.eq(0).on("click", function () {
        $left.find("li").each(function () {
          var $item = $(this);
          $item.remove();
          $right.append($item);
        });
      });

      $btnAll.eq(1).on("click", function () {
        $right.find("li").each(function () {
          var $item = $(this);
          $item.remove();
          $left.append($item);
        });
      });

      $btnAll.eq(2).on("click", function () {
        var $activeLI = $left.find(".active");
        if ($activeLI.length) {
          $right.append($activeLI);
        }
      });

      $btnAll.eq(3).on("click", function () {
        var $activeLI = $right.find(".active");
        if ($activeLI.length) {
          $left.append($activeLI);
        }
      });
    </script>
  </body>
</html>
